<template>
  <div class="card content-box">
    <ECharts ref="echars" :option="option" />
  </div>
</template>

<script setup lang="ts" name="lineChart">
import { ref, reactive, onMounted, defineProps, watch } from "vue";
import { ECOption } from "@/components/ECharts/config";
import ECharts from "@/components/ECharts/index.vue";
import { graphic } from "echarts/core";
const props = defineProps({
  data: {
    type: Object
  },
  xdata: {
    type: Array
  },
  features: {
    type: Array
  }
});
//data赋值后执行
watch(
  () => props.data,
  newVal => {
    console.log("xdata value:", props.xdata);
    refreshEchart();
  }
);
const refreshEchart = () => {
  //legend数据
  const legendData = [];
  props.features.forEach(feature => {
    if (feature.mid == props.data.mid) {
      legendData.push(feature.positionName);
    }
  });
  if (props.data.did==1056||props.data.did==1057||props.data.did==1058) {

    legendData.length=0
    legendData.push("功出电压")
    legendData.push("功出电流")

    legendData.push("受端设备侧主轨电压(轨入)")
    legendData.push("受端设备侧小轨电压")
    legendData.push("接收入口主轨电压(轨出1)")
    legendData.push("接收入口小轨电压(轨出2)")
    legendData.push("送端电缆侧电压")
    legendData.push("送端电缆侧电流")
    legendData.push("受端电缆侧主轨电压")
    legendData.push("受端电缆侧小轨电压")
    legendData.push("小轨继电器")
    legendData.push("主轨继电器")
  }
  option.legend = reactive({
    data: legendData,
    textStyle: {
      color: "#a1a1a1"
    }
  });


  // 数据处理
  const seriesData = [];
  for (let i = 0; i < props.data.data.length; i++) {
    let seriesItem;

    if (props.data.mid == 1 && i >= props.data.data.length - 2) {

      seriesItem = {
        name: legendData[i],
        type: "custom",
        xAxisIndex: 1,
        yAxisIndex: 1,
        itemStyle: {
          // color: "red",
          opacity: 0.8
        },
        encode: {
          // x: [0], // data 中『维度1』和『维度2』对应到 X 轴
          y: 1 // data 中『维度0』对应到 Y 轴
        },
        renderItem: function (params, api) {

          //开发者自定义的图形元素渲染逻辑，是通过书写 renderItem 函数实现的
          let status = api.value(1); //这里使用 api.value(0) 取出当前 dataItem 中第一个维度的数值。
          // console.log(status)
          let start = api.coord([params.dataIndex, params.seriesIndex % 2]); // 这里使用 api.coord(...) 将数值在当前坐标系中转换成为屏幕上的点的像素值。
          let end = api.coord([params.dataIndex + 1, params.seriesIndex % 2]);
          let height = 24; //柱体宽度
          return {
            type: "rect", // 表示这个图形元素是矩形。还可以是 'circle', 'sector', 'polygon' 等等。
            shape: graphic.clipRectByRect(
              {
                // 矩形的位置和大小。
                x: start[0],
                y: start[1] - height / 2,
                width: end[0] - start[0],
                height: height
              },
              {
                // 当前坐标系的包围盒。
                x: params.coordSys.x,
                y: params.coordSys.y,
                width: params.coordSys.width,
                height: params.coordSys.height
              }
            ),
            style: {
              stroke: status == 1 ? "green" : status == 0 ? "red" : "gray",
              fill: status == 1 ? "green" : status == 0 ? "red" : "gray"
            }
          };
        },
        data: props.data.data[i]
      };
    } else {
      seriesItem = {
        name: legendData[i],
        // stack: "Total",
        type: "line",
        xAxisIndex: 0,
        yAxisIndex: 0,
        label: {
          show: false,
          position: "top"
        },
        emphasis: {
          focus: "series"
        },
        data: props.data.data[i]
      };
    }
    seriesData.push(seriesItem);
  }
  option.series = seriesData;
};

const option = reactive({
  title: {
    show: false,
    text: "Stacked Area Chart",
    textStyle: {
      color: "#a1a1a1",
    },
  },
  tooltip: {
    trigger: "axis",
    axisPointer: {
      type: "cross",
      label: {
        backgroundColor: "#6a7985",
      },
    },
  },
  toolbox: {
    feature: {
      saveAsImage: {},
    },
  },
  grid: [
    {
      left: "3%",
      right: "4%",
      bottom: "20%",
      containLabel: true,
    },
    {
      top: "80%",
      left: "3%",
      right: "4%",
      bottom: "3%",
      containLabel: true,
    },
  ],
  xAxis: [
    {
      type: "category",
      boundaryGap: false,
      data: props.xdata,

      gridIndex: 0,
      show: false,
      axisLabel: {
        color: "#a1a1a1",
        interval: 4

      },
    },
    {
      type: "category",
      gridIndex: 1,
      boundaryGap: false,
      data: props.xdata,
      axisLabel: {
        color: "#a1a1a1",
        interval: 4
      },
    },
  ],
  yAxis: [
    {
      type: "value",
      gridIndex: 0,
      axisLabel: {
        color: "#a1a1a1",
      },
    },
    {
      type: "category",
      gridIndex: 1,
      data: ["ZGJ", "XJ"],
    },
  ],
  series: [],
});


</script>
